<!-- common start -->
#include("common.html")
<!-- common end -->
<!doctype html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>JreCms-永久开源免费的JAVA企业网站开发建设管理系统</title>
	<meta name="keywords" content="cms,免费cms,开源cms,企业cms,建站cms">
	<meta name="description" content="JreCms是一套全新内核且永久开源免费的JAVA企业网站开发建设管理系统，是一套高效、简洁、 强悍的可免费商用的JAVA CMS源码，能够满足各类企业网站开发建设的需要。系统采用简单到想哭的模板标签，只要懂HTML就可快速开发企业网站。官方提供了大量网站模板免费下载和使用，将致力于为广大开发者和企业提供最佳的网站开发建设解决方案。">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,shrink-to-fit=no">
	<link rel="stylesheet" href="#(tpath)/static/bootstrap/css/bootstrap.min.css" >
	<link rel="stylesheet" href="#(tpath)/static/font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="#(tpath)/static/css/aoyun.css?v=v1.3.5" >
	<link rel="stylesheet" href="#(tpath)/static/swiper-4.3.5/css/swiper.min.css">
	<link rel="stylesheet" href="#(tpath)/static/css/animate.css">
	<script src="#(tpath)/static/js/jquery-1.12.4.min.js" ></script>
</head>
<body>
<!-- header start -->
#include("header.html")
<!-- header end -->

<!-- top start -->
#include("top.html")
<!-- top end -->

<div class="container pages">

	<!-- position start -->
	#include("position.html")
	<!-- position end -->
    
    <div class="row">
       	<div class="col-12 col-lg-6 mb-5">
               <div class="view">
               	<a class="arrow-left" href="#"></a>
				<a class="arrow-right" href="#"></a>
                   <div class="swiper-container">
                       <div class="swiper-wrapper" >
                       	   <div class="swiper-slide">
                               <img src="#(currentContent.ico)">
                           </div>
                           #if(currentContent.pics??)
                           #for(pic : currentContent.pics.split(","))
                           <div class="swiper-slide">
                               <img src="#(pic)">
                           </div>
                           #end
                           #end
                       </div>
                   </div>
               </div>
               
               <div class="preview mt-3">
                   <a class="arrow-left" href="#"></a>
                   <a class="arrow-right" href="#"></a>
                   <div class="swiper-container" >
                       <div class="swiper-wrapper">
                       	<div class="swiper-slide active-nav swiper-slide-active">
                               <img src="#(currentContent.ico)">
                           </div>
                           #if(currentContent.pics??)
                           #for(pic : currentContent.pics.split(","))
                           <div class="swiper-slide">
                               <img src="#(pic)">
                           </div>
                           #end
                           #end
                       </div>
                   </div>
               </div>
           </div>
            
        	<div class="col-12 col-lg-6 mb-3 pr-3">
            	<h2 class="border-bottom pb-2 fs-sm-28 fs-20">#(currentContent.title)</h2>
                <div class="text-secondary my-3 border-bottom-dashed lh-3">
                      	上架时间：#date(currentContent.publishDate,'yyyy-MM-dd')
                </div>
                <div class="text-secondary my-3 border-bottom-dashed lh-3">
                      	浏览次数：<script src="#(currentSite.url)/api/visits?contentId=#(currentContent.id)"></script>
                </div>
                
                <div class="text-secondary my-3 border-bottom-dashed lh-3">
                      	产品类型：
                </div>
                
                <div class="text-secondary my-3 border-bottom-dashed lh-3">
                     	 产品颜色：
                </div>
                 <div class="text-secondary my-3 border-bottom-dashed lh-3">
                     	 产品价格：￥
                </div>
                <div class="my-3 lh-3">
                     <a href="http://wpa.qq.com/msgrd?v=3&uin=#(currentCompany.qq)&site=qq&menu=yes" class="btn btn-danger">马上咨询</a>
                </div>
            </div>
      </div>
      
      <h5 class="border-bottom border-info pb-2 mb-2"><i class="fa fa-sliders" aria-hidden="true"></i> 产品详情</h5>
      <div class="content">#(currentContent.introduction)</div>
      
      <div class="text-secondary lh-2">
			<p>上一篇：#if(currentContent.lastContent??)<a href="#(currentContent.lastContent.path)">#(abbreviate(currentContent.lastContent.title,15,''))</a>#else无#end</p>
		<p>下一篇：#if(currentContent.nextContent??)<a href="#(currentContent.nextContent.path)">#(abbreviate(currentContent.nextContent.title,15,''))</a>#else无#end</p>
      </div>
</div>
    

<script src="#(tpath)/static/swiper-4.3.5/js/swiper.min.js"></script>
<script>
var viewSwiper = new Swiper('.view .swiper-container', {
	on:{
		slideChangeTransitionStart: function() {
		    updateNavPosition()
	    }
	}
})

$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
	e.preventDefault()
	if (viewSwiper.activeIndex == 0) {
		viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
		return
	}
	viewSwiper.slidePrev()
})
$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
	e.preventDefault()
	if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
		viewSwiper.slideTo(0, 1000);
		return
	}
	viewSwiper.slideNext()
})

var previewSwiper = new Swiper('.preview .swiper-container', {
	//visibilityFullFit: true,
	slidesPerView: 'auto',
	allowTouchMove: false,
	on:{
		tap: function() {
		    viewSwiper.slideTo(previewSwiper.clickedIndex)
	  }
	}
})

function updateNavPosition() {
		$('.preview .active-nav').removeClass('active-nav')
		var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
		if (!activeNav.hasClass('swiper-slide-visible')) {
			if (activeNav.index() > previewSwiper.activeIndex) {
				var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
				previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
			} else {
				previewSwiper.slideTo(activeNav.index())
			}
		}
	}
</script>

<!-- footer start -->
#include("footer.html")
<!-- footer end -->

</body>
</html>
